﻿<template>
  <div class="login-view">
    <div class="login-card">
      <div class="login-header">
        <h1>账号登录</h1>
        <p>请输入租户、账号和密码完成登录</p>
      </div>
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-position="top"
        @keydown.enter.prevent="handleSubmit"
      >
        <el-form-item label="租户ID" prop="tenantId">
          <el-input
            v-model.trim="form.tenantId"
            placeholder="请输入租户ID"
            autocomplete="on"
          />
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model.trim="form.username"
            placeholder="请输入用户名"
            autocomplete="on"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            show-password
            placeholder="请输入密码"
            autocomplete="off"
          />
        </el-form-item>
        <el-button
          type="primary"
          class="login-button"
          :loading="authStore.loading"
          @click="handleSubmit"
        >
          {{ authStore.loading ? '登录中...' : '登录' }}
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const route = useRoute()
const formRef = ref<FormInstance>()
const authStore = useAuthStore()

const form = reactive({
  tenantId: authStore.tenantId || '',
  username: authStore.username || '',
  password: ''
})

const rules: FormRules = {
  tenantId: [{ required: true, message: '租户ID不能为空', trigger: 'blur' }],
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
}

async function handleSubmit() {
  if (!formRef.value) {
    return
  }
  await formRef.value.validate(async (valid) => {
    if (!valid) {
      return
    }
    try {
      await authStore.login({
        tenantId: form.tenantId,
        username: form.username,
        password: form.password
      })
      ElMessage.success('登录成功')
      const redirect = (route.query.redirect as string) || '/'
      router.replace(redirect)
    } catch (error) {
      console.error('登录失败:', error)
    }
  })
}
</script>

<style scoped>
.login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(76, 110, 245, 0.12), rgba(214, 51, 108, 0.12));
}

.login-card {
  width: 360px;
  padding: 32px;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.15);
  border: 1px solid #e4e7ed;
}

.login-header {
  text-align: center;
  margin-bottom: 24px;
}

.login-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #303133;
}

.login-header p {
  margin: 0;
  font-size: 13px;
  color: #606266;
}

.login-button {
  width: 100%;
  margin-top: 12px;
}
</style>
